<template>
  <!-- 活动列表 -->
  <scroll-view 
      scroll-y 
      class="activity-scroll"
      @scrolltolower="$emit('load-more')"
      @scroll="handleScroll"
      :lower-threshold="50"
  >
      <!-- 空状态提示 -->
      <view v-if="filteredActivities.length === 0" class="empty-state">
          <text class="empty-text">暂无活动数据</text>
      </view>
      
      <!-- 活动列表容器 -->
      <view class="activity-list">
          <view 
              v-for="(activity, index) in filteredActivities" 
              :key="index"
              class="activity-item"
              @click="handleActivityClick(activity.activityId)"
          >
              <view class="activity-header">
                  <text class="activity-title">{{ activity.title }}</text>
                  <text class="status-tag" :class="'status-' + activity.status.toLowerCase()">{{ activity.status }}</text>
              </view>
              <view class="activity-meta">
                <view class="meta-item">
                      <view class="clock-icon"></view>
                      <text class="meta-text">{{ activity.dateRange }}</text>
                  </view>
                  <view class="meta-item">
                      <view class="location-icon"></view>
                      <text class="meta-text">{{ activity.location }}</text>
                  </view>
                  <view class="meta-item">
                      <view class="category-icon"></view>
                      <text class="meta-text">{{ activity.category}}</text>
                  </view>
                  <view class="meta-item">
                      <text class="meta-text">参与人数：{{ activity.participantLimit }}人</text>
                  </view>
              </view>
          </view>
          
          <!-- 加载状态提示 -->
          <view v-if="!hasMore && filteredActivities.length > 0" class="bottom-hint">
              <text class="bottom-text">已经到底了~</text>
          </view>
      </view>
  </scroll-view>
</template>

<script setup>
const props = defineProps({
  filteredActivities: {
    type: Array,
    default: () => []
  },
  hasMore: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['load-more', 'activity-click', 'scroll'])

const handleActivityClick = (activityId) => {
  emit('activity-click', activityId)
}

const handleScroll = (e) => {
  emit('scroll', e)
}
</script>

<style scoped>
.activity-scroll {
    height: calc(100vh - 200rpx);
    background: #ffffff;
}

.empty-state {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400rpx;
    background: #ffffff;
    border-radius: 8rpx;
    margin: 20rpx;
    flex-direction: column;
}

.empty-text {
    font-size: 28rpx;
    color: #999;
    margin-top: 10rpx;
}

.activity-list {
    padding: 20rpx;
    background: #ffffff;
}

.activity-item {
    background: #ffffff;
    border-radius: 8rpx;
    padding: 20rpx;
    margin-bottom: 12rpx;
    border: 1rpx solid #f0f0f0;
}

.activity-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16rpx;
}

.activity-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
    flex: 1;
    margin-right: 16rpx;
    line-height: 1.4;
}

.status-tag {
    padding: 4rpx 12rpx;
    border-radius: 4rpx;
    font-size: 22rpx;
    white-space: nowrap;
    margin-left: 16rpx;
}

.status-upcoming {
    background: #f5f5f5;
    color: #666;
}

.status-ongoing {
    background: #f5f5f5;
    color: #666;
}

.status-past {
    background: #f5f5f5;
    color: #666;
}

.activity-meta {
    display: flex;
    flex-direction: column;
    gap: 8rpx;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 8rpx;
}

.meta-text {
    font-size: 26rpx;
    color: #666;
}

.bottom-hint {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20rpx 0;
    color: #ccc;
    font-size: 24rpx;
}

/* 时钟图标 */
.clock-icon {
  width: 24rpx;
  height: 24rpx;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 8rpx;
}

/* 位置图标 */
.location-icon {
  width: 24rpx;
  height: 24rpx;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 8rpx;
}

/* 学分类型图标 */
.category-icon {
  width: 24rpx;
  height: 24rpx;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 8rpx;
}


</style>